<template>
	<div class="customer_service">
		<x-header title="客服中心" class="blues" :left-options="{backText: ''}">
		</x-header>
		<div class="content">
			<div class="common_problem">
				<h6>常见问题</h6>
				<div>
					<p>
						<span>团购新手教程</span>
						<img src="../../assets/images/groups/right.jpg" alt="" />
					</p>
					<p @click="goTicket">
						<span>代金券新手教程</span>
						<img src="../../assets/images/groups/right.jpg" alt="" />
					</p>
					<p>
						<span>使用图片被驳回</span>
						<img src="../../assets/images/groups/right.jpg" alt="" />
					</p>
					<p>
						<span>修改消费时间被驳回</span>
						<img src="../../assets/images/groups/right.jpg" alt="" />
					</p>
				</div>
			</div>
			<div class="more_problem">
				<h6>更多问题分类</h6>
				<div>
					<div class="account">
						<h5>费率收款账户</h5>
						<span>费率、合同、账户</span>
					</div>
					<div class="img_use">
						<h5>图片使用</h5>
						<span>首图、菜品图、门店图</span>
					</div>
				</div>
				<div>
					<div class="account">
						<h5>套餐菜品</h5>
						<span>增减菜品，菜品价格</span>
					</div>
					<div class="img_use">
						<h5>门店</h5>
						<span>添加门店 认领门店</span>
					</div>
				</div>
				<div>
					<div class="account">
						<h5>消费时间，有效期</h5>
						<span>消费时间，延期等</span>
					</div>
					<div class="img_use">
						<h5>售卖量</h5>
						<span>售卖平台，售卖数量</span>
					</div>
				</div>
				<div>
					<div class="account">
						<h5>项目管理</h5>
						<span>下线，修改项目</span>
					</div>
					<div class="img_use">
						<h5>其他</h5>
						<span>套餐名称，用餐类型等选项</span>
					</div>
				</div>
			</div>
			<div class="feedback">
				<p>意见反馈</p>
				<p>
					<span>让我们更好</span>
					<img src="../../assets/images/groups/right.jpg" alt="" />
				</p>				
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem, } from 'vux';
	export default {
		name: 'customer_service',
		data() {
			return {
				msg: ''
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem			
		},
		computed: {

		},
		created() {

		},
		methods: {
			//代金券
			goTicket(){
				this.$router.push('/ticketEntry');
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.customer_service {
		padding-bottom: .5rem;		
		overflow-x: hidden;
		.content {
			text-align: left;
			h6{
				background: #f0f0f0;	
				padding: .25rem 0 .17rem .28rem;
				font-size: .24rem;
				color: #999;
				border-top: 2px solid #e1e1e1;
				border-bottom: 2px solid #e1e1e1;
			}
			.common_problem{	
				background: #fff;										
				div{					
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					p{						
						width: 7.28rem;
						border-bottom: 1px solid #e1e1e1;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: .3rem .32rem .3rem .08rem;
						margin-left: .24rem;
						span{
							font-size: .28rem;
							color: #1e1e1e;
						}
						img{
							width: .16rem;
							height: .26rem;
						}
					}
				}
			}
			.more_problem{
				background: #fff;
				>div{
					display: flex;
					.account,.img_use{
						width: 3.75rem;
						height: 1.44rem;						
						h5{
							font-size: .28rem;
							color: #151515;
						}
						span{
							font-size: .22rem;
							color: #5f5f5f;
							margin-top: .18rem;
							white-space: nowrap;
						}
					}
					.account{
						padding: .5rem 0 0 .46rem;
						border-bottom: 1px solid #e9e9e9;
						border-right: 1px solid #e9e9e9;
					}
					.img_use{
						padding: .5rem 0 0 .34rem;
						border-bottom: 1px solid #e9e9e9;
					}
				}
			}
			.feedback{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: .27rem;
				border-top: .34rem solid #f0f0f0;
				background: #fff;
				p:nth-of-type(1){
					font-size: .24rem;
					color: #232323;
				}
				p:nth-of-type(2){
					display: flex;
					align-items: center;
					span{
						font-size: .24rem;
						color: #989898;
					}
					img{
						width: .16rem;
						height: .26rem;
						margin-left: .32rem;
					}
				}
			}
		}
	}
</style>